<template>
	<view class="container">
		<!-- 选择地址区域 -->
		<view class="select-address-box" v-if="Object.keys(this.address).length === 0">
			<!-- 按钮区域 -->
			<button type="primary" size="mini" @click="chooseAddress">请选择收货地址+</button>
		</view>
		<!-- 地址信息区域 -->
		<view class="address-info-box" v-else @click="chooseAddress">
			<!-- 用户信息区域 -->
			<view class="user-info">
				<view class="name">
					收货人：
					<text>{{ address.userName }}</text>
				</view>
				<view class="phone-item">
					<view class="phone">
						电话：
						<text>{{ address.telNumber }}</text>
					</view>
					<uni-icons type="right" size="15"></uni-icons>
				</view>
			</view>
			<!-- 详细地址区域 -->
			<view class="address">
				收货地址：
				<text>{{ addrStr }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
	name: 'my-address',
	data() {
		return {};
	},
	methods: {
		// 映射
		...mapMutations('m_user', ['updateAddree']),
		// 选择收货地址
		async chooseAddress() {
			// 获取用户收货地址
			const [fail, success] = await uni.chooseAddress().catch(err => err);
			if (fail === null && success.errMsg === 'chooseAddress:ok') {
				this.updateAddree(success);
			}
		}
	},
	computed: {
		// 映射
		...mapState('m_user', ['address']),
		...mapGetters('m_user', ['addrStr'])
	}
};
</script>

<style lang="scss">
// 主体容器
.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 80px;
	border-bottom: 5px solid #efefef;
	// 选择地址
	.select-address-box {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	// 地址信息
	.address-info-box {
		padding: 0 5px;
		font-size: 13px;
		.user-info {
			display: flex;
			margin-bottom: 10px;
			.name {
				flex: 1;
			}
			.phone-item {
				flex: 1;
				display: flex;
				justify-content: space-between;
			}
		}
	}
}
</style>
